<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0328cart</title>
    <style>
        .product-num {
            display: inline-block;
            width: 60px;
            height: 25px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkbox"></th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for="(product,index) in cartInfo.data.cartModels">
                    <th><input type="checkbox" class="check-item"></th>
                    <td>{{product.name}}</td>
                    <td class="product-price">{{product.price.toFixed(2)}}</td>
                    <td>
                        <button class="btn" @click="product.num > 1 ? product.num-- : '' ">-</button>
                        <input class="product-num" :data-index="index" type="text" v-model="product.num">
                        <button class="btn" @click="product.num ++ ">+</button>
                    </td>
                    <td class="sum">{{(product.price*product.num).toFixed(2)}}</td>
                </tr>
                <tr>
                    <td colspan="3">总计</td>
                    <td id="totalnum">{{totalnum}}</td>
                    <td id="totalprice">{{totalprice}}</td>
                </tr>
            </tbody>
        </table>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                index: "",
                cartInfo: {},


            },
            created() {
                this.getData();
            },
            computed: {
                totalnum:function(){
                    let num=0;
                    this.cartInfo.data.cartModels.forEach(item => {
                         num+= item.num
                    });
                    return num
                },
                totalprice:function(){
                    let price=0;
                    this.cartInfo.data.cartModels.forEach(item => {
                         price+= item.price*item.num
                    });
                    return price.toFixed(2)
                }
            },
            methods: {
                getData: function () {
                    //Ajax请求
                    /*$ajax({
                        url:'xxxx',
                        type:'GET',
                        data:{

                        },
                        success:function(res){
                            //获取数据
                            this.cartInfo=res.data;
                        }
                    })*/
                    this.cartInfo = {
                        "success": true,
                        "code": "0000",
                        "message": "操作成功",
                        "data": {
                            "cartModels": [
                                {
                                    "productId": "100012021",
                                    "name": "宏远/HOLD 高档安全防护帽红黄橙三系列 红色 /1顶",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/20250c9c-32ab-44fa-8dfa-5c5dfb29292a-thumbnail.jpg",
                                    "price": 18.5,
                                    "num": 10,
                                    "sum": 185.00
                                },
                                {
                                    "productId": "100018897",
                                    "name": "WORKPRO/万克宝-综合工具组套 9PC 家用组套五金维修工具-(W009046N)/1套",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/185ef417-cb9b-4b40-88c1-5f3866769c19-170.jpg",
                                    "price": 50.0,
                                    "num": 5,
                                    "sum": 250.00
                                },
                                {
                                    "productId": "100012580",
                                    "name": "DCA-电磨头S1J-FF03-10 可调速直磨打磨机-(1302020020)/1把",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/d956efe9-4f6f-4f71-a64d-99a9ff9da69c-170.jpg",
                                    "price": 145.0,
                                    "num": 2,
                                    "sum": 290.00
                                },
                                {
                                    "productId": "100012752",
                                    "name": "DREMEL/琢美-1/26电磨机套装-(F0133000RC)/1套",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/8/ebe76c7c-701f-4e62-b4a2-9382634655df-170.jpg",
                                    "price": 469.0,
                                    "num": 1,
                                    "sum": 469.00
                                },
                                {
                                    "productId": "100023396", "name": "韩氏-防尘帽轻型防撞帽 防尘帽-(HS021)/1个",
                                    "imageUrl": "//resource.toolmall.com/merchantbussness/online/2019/12/1575351588816-a6493source.jpg?x-oss-process=image/resize,m_fixed,h_170,w_170",
                                    "price": 4.0,
                                    "num": 11,
                                    "sum": 44.00
                                },
                                {
                                    "productId": "100012021",
                                    "name": "宏远/HOLD 高档安全防护帽红黄橙三系列 红色 /1顶",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/20250c9c-32ab-44fa-8dfa-5c5dfb29292a-thumbnail.jpg",
                                    "price": 18.5,
                                    "num": 10,
                                    "sum": 185.00
                                },
                                {
                                    "productId": "100012752",
                                    "name": "DREMEL/琢美-1/26电磨机套装-(F0133000RC)/1套",
                                    "imageUrl": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/8/ebe76c7c-701f-4e62-b4a2-9382634655df-170.jpg",
                                    "price": 469.0,
                                    "num": 1,
                                    "sum": 469.00
                                }
                            ],
                            "disabledCartModels": [],
                            "totalPrice": 686.50
                        }
                    }
                   
                }
            },

        })
    </script>
</body>

</html>